<template>
    <div class="home-page">
        <div id="mescroll" class="mescroll mescroll-wrap"  v-mescroll="{up:'upCallback',size:page.pageSize,num:page.pageNo}">
            <div class="mescroll-bounce">
                <div class="wrapper">
                    <search @search="search"></search>
                    <navbar :list="typeList" v-if="typeList.length"></navbar>
                    <z-banner :bannerData="bannerData" :canClick="'true'" v-if="bannerData.length" class="banner-out"></z-banner>
                    <article-list :list='articleList' class="list-out"></article-list>
                </div>
            </div>
        </div>
        <z-footer></z-footer>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {homeService} from '../../service/homeService'
    import searchbtn from '../../component/common/search.vue'
    import navbar from '../../component/common/navbar.vue'
    import articlelist from '../../component/list/article-list.vue'

    export default {

        name: 'home',
        // 添加以下代码
        metaInfo () {
            // console.log(this);
            const title = this.title
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: '运联' },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联首页' },
                ]
            }
        },
        components: { 'search':searchbtn,'navbar':navbar,'article-list':articlelist },
        data () {
            return {
                title:"运联传媒",
                count:1
            }
        },
        asyncData({store,route}) {
            store.state.homeStore.page = {pageNo:1,pageSize:10,queryType:1}
            function getarticleList(){
                return homeService.articleList(store.state.homeStore.page).then(function(res) {
                    store.state.homeStore.articleList = res.data.datas.datas
                    store.state.homeStore.page.total = res.data.datas.totalPage
                    store.state.homeStore.page.pageNo = 2
                })
            }
            function gettypeList(){
                return homeService.typeList().then(function(res){
                    store.state.homeStore.typeList = []
                    let list = res.data.datas
                    for(let i in list){
                        if(list[i].id){
                            list[i].tolink = {name:'articles',params:{typeId:list[i].id}}
                        }else{
                            list[i].tolink = {name:'home'}
                        }
                        store.state.homeStore.typeList.push(list[i])
                    }
                })
            }
            function getbanners(){
                return homeService.getbanners({type:0}).then(function(res){
                    store.state.homeStore.bannerData = res.data.datas
                })
            }
            if(route.name == 'home'){
                return Promise.all([
                    getarticleList(),gettypeList(),getbanners()
                ])
            }else{
                store.state.homeStore.page.articleType=route.params.typeId
                return Promise.all([
                    getarticleList(),gettypeList()
                ])
            }

        },
        computed: {
            //将存在store中的数据取出
            typeList:{
                // getter
                get: function () { return this.$store.state.homeStore.typeList || []},
                // setter
                set: function (newValue) {return newValue}
            },
            bannerData:{
                // getter
                get: function () { return this.$store.state.homeStore.bannerData || []},
                // setter
                set: function (newValue) {return newValue}
            },
            articleList: {
                get: function () { return this.$store.state.homeStore.articleList || []},
                set: function (newValue) {return newValue}
            },
            page: {
                get: function () { return this.$store.state.homeStore.page || []},
                set: function (newValue) {return newValue}
            },
        },
        mounted: function() {
            let that = this
            // console.log(this.bannerData);
//            that.getTypeList()
//            that.getbanners()
            /*
             * 微信分享设置
             * type查看规则列表写死，
             * text.name为文章标题
             * */
            appService.getWxJssdk().then(function () {
                appService.getWxShare({hasGet:true},that.title)
            })
        },
        methods: {
            //搜索，带关键字跳转搜索页
            search:function (v) {
                let that = this
                that.$router.replace({name:'search',params:{type:1,query:v}})
            },
            //获取分类列表
            getTypeList:function () {
                let store = this.$store
                homeService.typeList().then(function(res){
                    store.state.homeStore.typeList = res.data.datas
                })
            },
            //获取分类列表
            getbanners:function () {
                let store = this.$store
                homeService.getbanners({type:0}).then(function(res){
                    store.state.homeStore.bannerData = res.data.datas
                })
            },
            //获取文章列表
            getList:function () {
                let that = this
                let store = that.$store
                let params = {}
                params.pageNo = that.page.pageNo
                params.pageSize = that.page.pageSize
                if(that.page.articleType) params.articleType = that.page.articleType
                params.queryType = 1
                homeService.articleList(params).then(function(res){
                    if(!res.data || !res.data.datas) return
                    let list = res.data.datas.datas
                    if(that.page.pageNo*1===1){
                        store.state.homeStore.articleList=res.data.datas.datas
                    }else{
                        for(let i in list){
                            store.state.homeStore.articleList.push(list[i])
                        }
                    }
//                    that.articleList = that.$store.state.homeStore.articleList
                    that.page.pageNo+=1
                    that.mescroll.endSuccess(list.length);
                })
            },
            //上拉
            upCallback:function () {
                let that = this
                that.getList()
            },
            getStatus (urlStr) {
                var urlStrArr = urlStr.split('/')
                return urlStrArr[urlStrArr.length - 1]
            }
        },
        watch: {
            '$route' (to, from) {
                if(to.name=='home'){
                    this.$store.state.homeStore.page={pageNo:1,pageSize:10,queryType:1}
                    this.getbanners()
                    this.getList()
                }else{
                    this.$store.state.homeStore.page={pageNo:1,pageSize:10,queryType:1,articleType:to.params.typeId}
                    this.$store.state.homeStore.bannerData=[]
                    this.getList()
                }

            }
        },
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");
    .home-page .mescroll-wrap{
        background:#fff;
        bottom: 1.2rem!important;
        .banner-out{
            margin:2px 0 10px 0;
        }
        .list-out{
            padding-top:.3rem;
        }
    }

</style>
